<template>
    <div class="zuidabox">
        <van-image width="100%" height="100" :src="img" />
        <van-nav-bar style="margin-top:4px" title="- 申请边检快捷通道 -" />
        <van-form :data="formData">
            <van-cell-group class="ab" title="姓名">
                <van-field v-model="xzsxm" type="String" readonly placeholder="请输入姓名" />
            </van-cell-group>
            <van-cell-group class="ab" title="手机号：">
                <van-field v-model="xzssjh" type="String" readonly placeholder="请输入手机号：" />
            </van-cell-group>
            <van-cell-group class="ab" title="身份证号：">
                <van-field v-model="xzssfz" type="String" readonly placeholder="请输入身份证号：" />
            </van-cell-group>
            <!-- <van-cell-group class="ab" title="船舶国籍：">
                <van-field v-model="formData.cbgj" type="String" placeholder="请输入船舶国籍：" />
            </van-cell-group> -->


            <van-cell-group class="ab" title="船舶国籍：">
                <van-field v-model="formData.cbgj" type="String" @click="hqjdgj" @blur="sqjdgj" placeholder="请输入船舶国籍" />
            </van-cell-group>
            <div class="bdgj" v-show="yincanggj">
                <div class="a" @click="jshuzugj(item)" v-for="(item,index) in historyWord" :key="index">{{item}}
                </div>
            </div>


            <van-cell-group class="ab" title="船舶IMO号：">
                <van-field v-model="formData.imo" type="String" @click="hqjd" @blur="sqjd" placeholder="请输入船舶IMO号" />
            </van-cell-group>
            <div class="bd" v-show="yincang">
                <div class="a" @click="jshuzu(item)" v-for="(item,index) in historyWords" :key="index">{{item}}
                </div>
            </div>
            <van-cell-group class="ab" title="选择货物种类：">
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false">
                        <template #option="option">
                            <div style="display: flex; flex-direction: column; align-items: center;">
                                <div>{{ option.name }}</div>
                            </div>
                        </template>
                    </van-picker>
                </van-popup>
                <van-field class="djxzhw" readonly clickable name="picker" :value="formData.value" label=""
                    placeholder="点击选择货物" @click="showPicker = true" />
            </van-cell-group>

            <van-cell-group class="ab" id="qwejp" title="开通快捷通道时间">
                <el-date-picker v-model="value3" :editable="false" format="yyyy-MM-dd HH:00:00"
                    popper-class="noneMinute" :picker-options="pickerOptions" type="datetime" placeholder="点击选择日期时间"
                    default-time="12:00:00">
                </el-date-picker>
            </van-cell-group>
            <van-button class="ann" type="info" round block native-type="submit" :disabled="zt='1'? false:true"
                @click="tshwtj">马上提交
            </van-button>
            <div style="height:40px;"></div>
        </van-form>

    </div>
</template>
<script>
    export default {
        name: "tshw",
        data() {
            return {
                historyWord: [],
                b: '',
                historyWords: [],
                bs: '',
                value3: '',
                img: require('@/assets/image/72.png'),
                zt: "1",
                xzsxm: "",
                xzssfz: "",
                xzssjh: "",
                hwid: "",
                formData: {
                    xm: "",
                    sjh: "",
                    sfz: "",
                    cbgj: "",
                    imo: "",
                    value: '',
                },
                activeName: '1',
                yincang: false,
                yincanggj: false,
                // 选择器
                columns: [],
                showPicker: false,
                // 底部弹出
                show: false,
                pickerOptions: {
                    //这里是限制今天以前的时间将其禁用
                    //如果不减后面的时间，就是不能选择今天的
                    disabledDate(time) {
                        return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
                    },
                    //这里限制了只能选择当前时间的五分钟后
                    selectableRange: new Date().getHours() + 1 + ":" + (new Date().getMinutes()) + ":00 - 23:59:00",
                },
            };
        },
        //通过监听属性，看是否选择的是今天的时间，来动态改变pickerOptions中selectableRange属性来限制时分秒
        watch: {
            //通过监听属性，看是否选择的是今天的时间，来动态改变pickerOptions中selectableRange属性来限制时分秒
            value3: {
                handler(newVal, oldVal) {
                    //这里判断是不是今天
                    if (
                        newVal &&
                        newVal.getFullYear() == new Date().getFullYear() &&
                        newVal.getMonth() == new Date().getMonth() &&
                        newVal.getDate() == new Date().getDate()
                    ) {
                        //如果为今天，则限制当前时间前的时间不能选择。(分钟后面的+5 可以不要这里看自己的功能需求进行更改)
                        this.pickerOptions.selectableRange =
                            (new Date().getHours() + 1) +
                            ":" +
                            (new Date().getMinutes()) +
                            ":00 - 23:59:00";
                    } else {
                        //如果不是今天，则不用限制
                        this.pickerOptions.selectableRange = "00:00:00 - 23:59:00";
                    }
                }
            }
        },
        created() {
            console.log(new Date().getMinutes());
            var that = this
            that.spzl()
            that.historyWord = localStorage.getItem('searchWord')
            that.historyWord = that.historyWord.split(',') //将字符串转成数组

            that.historyWords = localStorage.getItem('searchWords')
            that.historyWords = that.historyWords.split(',') //将字符串转成数组
        },
        mounted() {
            var that = this
            var mx = window.sessionStorage.getItem("mz")
            var sjh = window.sessionStorage.getItem("sjh")
            var sfz = window.sessionStorage.getItem("sfz")
            var xb = window.sessionStorage.getItem("xb")
            console.log("特殊货物", mx);
            console.log("特殊货物", sjh);
            console.log("特殊货物", sfz);
            that.formData.xm = mx
            that.formData.sfz = sfz
            that.formData.sjh = sjh
            console.log(that.formData.xm);
            console.log(that.formData.sfz);
            console.log(that.formData.sjh);
            if (xb == 1) {
                that.xb = "男"
            }
            if (xb == 2) {
                that.xb = "女"
            }
            that.name = mx
            that.sfz = sfz
            that.lxdh = sjh
            that.radio = xb
            // 须展示
            that.xzsxm = mx
            that.xzssjh = sjh
            that.xzssfz = sfz
            if (that.xzsxm.length == '2') {
                that.xzsxm = '*' + that.xzsxm.charAt(that.xzsxm.length - 1)
            }
            if (that.xzsxm.length == '3') {
                that.xzsxm = '**' + that.xzsxm.charAt(that.xzsxm.length - 1)
            }
            if (that.xzsxm.length == '4') {
                that.xzsxm = '***' + that.xzsxm.charAt(that.xzsxm.length - 1)
            }
            if (that.xzsxm.length == '5') {
                that.xzsxm = '****' + that.xzsxm.charAt(that.xzsxm.length - 1)
            }
            that.xzssjh = that.xzssjh.substr(0, 3) + '******' + that.xzssjh.substr(9, 2)
            // 15位身份证号
            if (that.xzssfz.length == '15') {
                that.xzssfz = that.xzssfz.substr(0, 1) + '*************' + that.xzssfz.substr(14, 1)
            }
            // 18位身份证号
            if (that.xzssfz.length == '18') {
                that.xzssfz = that.xzssfz.substr(0, 1) + '****************' + that.xzssfz.substr(17, 1)
            }
        },
        methods: {
            onSubmit(values) {
                var that = this
                console.log('submit', values);

            },
            // 选择器
            onConfirm(value) {
                var that = this
                that.formData.value = value.name;
                that.hwid = value.id
                that.showPicker = false;
                console.log(value);
            },
            showPopup() {
                var that = this
                that.show = true;
            },
            hqjd() {
                // var that = this
                this.yincang = true
                console.log("获取焦点");
            },
            hqjdgj() {
                var that = this
                that.yincanggj = true
            },

            jshuzu(row) {
                var that = this
                // that.formData.push(that.formData.ju)
                that.formData.imo = row
                // console.log(that.formData.imo);
                console.log(row);
            },
            jshuzugj(row) {
                var that = this
                // that.formData.push(that.formData.ju)
                that.formData.cbgj = row
                // console.log(that.formData.cbgj);
                console.log(row);
            },
            sqjd() {
                var that = this
                let t = setInterval(function () {
                    // that.yincang = false
                }, 200);
                setTimeout(() => {
                    clearInterval(t);
                    that.yincang = false
                    console.log("我在五秒时被取消！");;
                }, 400);

            },
            sqjdgj() {
                var that = this
                let t = setInterval(function () {
                    // that.yincang = false
                }, 200);
                setTimeout(() => {
                    clearInterval(t);
                    that.yincanggj = false
                    console.log("我在五秒时被取消！");;
                }, 400);
            },
            spzl() {
                // const axios = require('axios');
                // let config = {
                //     method: 'get',
                //     maxBodyLength: Infinity,
                //     url: 'https://161j4l5791.imdo.co/jeecg-boot/api/getType',
                //     headers: {}
                // };
                // axios.request(config)
                //     .then((response) => {
                //         that.columns = response.data.result
                //     })
                //     .catch((error) => {
                //         console.log(error);
                //     });
                // 爱山东
                var that = this
                var jmqsjtj = JSON.stringify({
                    //入参内容
                })
                var jmhsjtj = SM.encrypt(jmqsjtj,
                    //公钥
                    "04a4bd0de5d7229c1ac5c9d3e50c23e426e9bc6fd1efdc391352203383f79cb73347693f139e4c51942511baa9fdf9731671e214ff49aa4d1b5276a8832b41a68d"
                );
                // var appid = that.appid;
                var appid = "Embmzckm";
                var interfaceid = 'hqhwzllb';
                var interfacecontent = jmhsjtj
                var fromport = '2';
                var signurl = 'https://' + urldomaincreatesign;
                var gatewayurl = 'https://' + urldomaingateway;
                vaildInterfacefn(appid, interfaceid, interfacecontent, fromport, signurl, gatewayurl).then(
                    value => {
                        //私钥
                        var jjjsjtj = SM.decrypt(value,
                            "6636756e69f8276c514919d04eaf928498b443bfb783e8fe6fa6977056c4d90b");
                        var list = JSON.parse(jjjsjtj)
                        console.log(list);
                        that.columns = list.result
                    })
            },
            tshwtj() {
                // const axios = require('axios');
                // let data = JSON.stringify({
                //     "cbgj": that.formData.cbgj,
                //     "createBy": "",
                //     "createTime": "",
                //     "id": "",
                //     "imo": that.formData.imo,
                //     "name": that.formData.xm,
                //     "phone": that.formData.sjh,
                //     "sfz": that.formData.sfz,
                //     "sh": "",
                //     "shxx": "",
                //     "sysOrgCode": "",
                //     "tdsj": that.formData.value3,
                //     "type": that.formData.value,
                //     "updateBy": "",
                //     "updateTime": ""
                // });

                // let config = {
                //     method: 'post',
                //     maxBodyLength: Infinity,
                //     url: 'https://161j4l5791.imdo.co/jeecg-boot/api/add',
                //     headers: {
                //         'Content-Type': 'application/json',
                //     },
                //     data: data
                // };

                // axios.request(config)
                //     .then((response) => {
                //         console.log(response.data);
                //         console.log(that.formData.imo);
                //     })
                //     .catch((error) => {
                //         console.log(error);
                //     });

                var that = this
                // let searchWords = localStorage.getItem('searchWords');
                // if (searchWords == null) {
                //     localStorage.setItem('searchWords', that.formData.imo);
                // } else {
                //     let arrs = localStorage.getItem('searchWords')
                //     arrs = arrs.split(',')
                //     if (arrs.indexOf(that.formData.imo) != -1) {
                //         arrs = arrs
                //     } else {
                //         arrs.unshift(that.formData.imo);
                //     }
                //     that.bs = arrs
                //     if (that.bs.length > 5) {
                //         that.bs.pop()
                //     }
                //     localStorage.setItem('searchWords', that.bs)
                // }


                if (that.formData.cbgj == "") {
                    that.$toast('请填写船舶国籍');
                    return
                }
                if (that.formData.imo == "") {
                    that.$toast('请填写船舶IMO号');
                    return
                }
                if (that.formData.value == "") {
                    that.$toast('请选择货物种类');
                    return
                }
                if (that.value3 == "") {
                    that.$toast('请选择时间');
                    return
                }
                var year = that.value3.getFullYear();
                var month = that.value3.getMonth() + 1;
                var date = that.value3.getDate();
                var hour = that.value3.getHours();
                var shijian = year + '-' + month + '-' + date + ' ' + hour + ':00:00'
                that.$toast.loading({
                    message: '上传中...',
                    forbidClick: true,
                    duration: 50000,
                });
                var jmqsjtj = JSON.stringify({
                    //入参内容
                    "cbgj": that.formData.cbgj,
                    "createBy": "",
                    "createTime": "",
                    "id": "",
                    "imo": that.formData.imo,
                    "name": that.formData.xm,
                    "phone": that.formData.sjh,
                    "sfz": that.formData.sfz,
                    "sh": "",
                    "shxx": "",
                    "sysOrgCode": "",
                    "tdsj": shijian,
                    "type": that.hwid,
                    "updateBy": "",
                    "updateTime": ""
                })
                var jmhsjtj = SM.encrypt(jmqsjtj,
                    //公钥
                    "04565acdda36bec1d4ea2c6ab11c74a116768d2677232566eb86858d67742a35619069b409a1f7c3e44542b11c4a2d47e9f3cae91af05d21af6a2de794c1072f93"
                );
                // var appid = that.appid;
                var appid = "Embmzckm";
                var interfaceid = 'tshwtj';
                var interfacecontent = jmhsjtj
                var fromport = '2';
                var signurl = 'https://' + urldomaincreatesign;
                var gatewayurl = 'https://' + urldomaingateway;
                vaildInterfacefn(appid, interfaceid, interfacecontent, fromport, signurl, gatewayurl).then(
                    value => {
                        //私钥
                        var jjjsjtj = SM.decrypt(value,
                            "6636756e69f8276c514919d04eaf928498b443bfb783e8fe6fa6977056c4d90b");
                        var list = JSON.parse(jjjsjtj)

                        let searchWord = localStorage.getItem('searchWord');
                        if (searchWord == null) {
                            localStorage.setItem('searchWord', that.formData.cbgj);
                        } else {
                            let arr = localStorage.getItem('searchWord')
                            arr = arr.split(',')
                            if (arr.indexOf(that.formData.cbgj) != -1) {
                                arr = arr
                            } else {
                                arr.unshift(that.formData.cbgj);
                            }
                            that.b = arr
                            if (that.b.length > 5) {
                                that.b.pop()
                            }
                            localStorage.setItem('searchWord', that.b)
                        }

                        let searchWords = localStorage.getItem('searchWords');
                        if (searchWords == null) {
                            localStorage.setItem('searchWords', that.formData.imo);
                        } else {
                            let arrs = localStorage.getItem('searchWords')
                            arrs = arrs.split(',')
                            if (arrs.indexOf(that.formData.imo) != -1) {
                                arrs = arrs
                            } else {
                                arrs.unshift(that.formData.imo);
                            }
                            that.bs = arrs
                            if (that.bs.length > 5) {
                                that.bs.pop()
                            }
                            localStorage.setItem('searchWords', that.bs)
                        }

                        that.zt = "2"
                        if (list.code == 200) {
                            that.$toast.clear();
                            that.zt = "1"
                            that.$toast('提交成功');
                            that.$router.push('./')
                        }
                        if (list.code == 500) {
                            that.$toast.clear();
                            that.$toast(list.message);
                        }
                        // that.columns = list.result
                    })

            }
        },
    }
</script>

<style lang="less" scope>
    .noneMinute {
        .el-time-spinner__wrapper {
            width: 100% !important;
        }

        .el-scrollbar:nth-of-type(2) {
            display: none;
        }
    }

    // #qwejp {
    //     pointer-events: none;
    // }

    .cc {
        position: absolute;
    }

    .bd {
        position: absolute;
        z-index: 9999;
        // top: 37px;
        left: 20px;
        width: 90%;

        .a {
            height: 30px;
            background-color: #dbdbdb;
            border-bottom: solid 1px #c2c2c2;
            line-height: 30px;
        }
    }

    .bdgj {
        position: absolute;
        z-index: 9999;
        // top: 37px;
        left: 20px;
        width: 90%;

        .a {
            height: 30px;
            background-color: #dbdbdb;
            border-bottom: solid 1px #c2c2c2;
            line-height: 30px;
        }
    }

    .el-picker-panel__footer {
        /* font-size: 12px!important; */
    }

    .van-field__label {
        width: 7.2em
    }

    .el-date-editor {
        width: 100%;
    }

    .van-cell-group__title:before {
        content: "*";
        color: red;
        margin-right: 5px;
        font-size: 14px;

    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100%;
    }

    .djxzhw {
        border: 1px solid #DCDFE6;
    }

    .ann {
        margin-top: 4%;
    }
</style>